import { createVisualEditorConfig } from "@/packages/visual-editor.utils";
import { ElButton, ElInput, ElOption, ElSelect } from 'element-plus'
import { createColorProp, createTextProp, createSelectProp, createEditorTableProp } from "./packages/visual-editor.props";

export const visualConfig = createVisualEditorConfig()

visualConfig.registry('text', {
    label: '文本',
    preview: () => '预览文本',
    render: ({props}) => <span style={{color:props.color,fontSize: props.size}}>{props.text || '默认文本'}</span>,
    props: {
        text: createTextProp('显示文本'),
        color: createColorProp('字体颜色'),
        size: createSelectProp('字体大小', [
            { label: '12px', val: '12px' },
            { label: '14px', val: '14px' },
            { label: '16px', val: '16px' },
        ])
    }
})

visualConfig.registry('button', {
    label: '按钮',
    preview: () => <ElButton>按钮</ElButton>,
    render: ({props}) => <ElButton type={props.type} size={props.size}>{props.text || '按钮'}</ElButton>,
    props: {
        text: createTextProp('按钮文本'),
        type: createSelectProp('按钮类型', [
            { label: '基础', val: 'primary' },
            { label: '成功', val: 'success' },
            { label: '信息', val: 'info' },
            { label: '警告', val: 'warning' },
            { label: '危险', val: 'error' },
        ]
        ),
        size: createSelectProp('大小尺寸', [
            { label: '默认', val: '' },
            { label: '中', val: 'medium' },
            { label: '小', val: 'small' },
            { label: '极小', val: 'mini' },
        ]
        ),
    }
})


visualConfig.registry('select', {
    label: '下拉框',
    preview: () => <ElSelect />,
    render: ({props}) => <ElSelect>
        {(props.options || []).map((opt: {lable: string,value: string},index: number)=>{
            <ElOption label={opt.lable} value={opt.value} key={index}/>
        })}
    </ElSelect>,
    props: {
        options: createEditorTableProp('下拉选项',{
            options:[
                {label: '显示值', field: 'label'},
                {label: '绑定值', field: 'value'},
                {label: '备注', field: 'comments'}
            ],
            showKey:'label'
        })
    }
})

visualConfig.registry('input', {
    label: '输入框',
    preview: () => <ElInput />,
    render: ({props}) => <ElInput v-model={props.text}/>,
    props: {
        text: createTextProp('输入框文本')
    }
})